<template>
  <div>
    <!-- <h1>收入</h1> -->
    <mt-header fixed title="收入"></mt-header>
    <div class="expend">
      <div
        v-for="(item,index) in list2"
        :key="index"
        @click="remarkC(item,index)"
        :class="active==index?'active_remark':'normal_remark'"
      >{{item.label}}</div>
      <!-- 解决标签显示样式问题 -->
      <span></span>
      <span></span>
      <span></span>
    </div>
    <h1 class="showNum">{{values}}</h1>
    <Remark ref="refRemark"></Remark>
    <Cal @changekey="changekey" @makesure="confirm"></Cal>
  </div>
</template>

<script>
import Remark from "@/components/context/Remark";
import Cal from "@/components/common/cal";
import { Toast } from "mint-ui";
export default {
  name: "income",
  data() {
    return {
      list2: [],
      active: null,
      values: 0,
      information:[],//需要提交的信息
    };
  },
  components: {
    Remark,
    Cal
  },
  mounted() {
    this.list2 = this.$store.state.list2;
  },
  methods: {
    //标签被点击
    remarkC(item, index) {
      this.active = index;
      //存到Vuex中
      //   this.$emit("expend_even", item);
      this.$store.commit("changeIncomePitch", item);
      //   console.log(this.$store.state.incomePitch.label);
    },
    changekey(val) {
      if (val.length <= 0) return (this.values = 0);
      let vals = val.join("");
      this.values = vals;
    },
    confirm(val) {
      function add0(m){return m<10?'0'+m:m }
        function format(shijianchuo){
        //shijianchuo是整数，否则要parseInt转换
        var time = new Date(shijianchuo);
        var y = time.getFullYear();
        var m = time.getMonth()+1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
        }

      let pitch = this.$store.state.incomePitch;
      let num = parseFloat(val.join(""));
      let remarks = this.$refs.refRemark.remark;
      let time = new Date();
      // time = Date.parse(time);
      time = Date.parse(time);
      time = format(time)
      this.information = {
        Pitch: pitch.label,
        Num: num,
        Reamrk: remarks,
        Time: time,
      };
      // console.log(isNaN(num));
      //判断是否缺少什么
      if (pitch.label === undefined || isNaN(num)) {
        var tos = Toast("缺少参数");
        setTimeout(() => {
          if (tos) tos.close();
        }, 500);
        return;
      }
      //localStorage录入自启逻辑,先取出加上在放进去。很蠢的方法
      let info = this.information;
      let sto = [info];
      if (window.localStorage.getItem("incomeF") === null) {
        window.localStorage.setItem("incomeF", JSON.stringify(sto));
      } else if (window.localStorage.getItem("incomeF") !== null) {
        let storages = JSON.parse(window.localStorage.getItem("incomeF"));
        storages.push(info);
        window.localStorage.setItem("incomeF", JSON.stringify(storages));
      }
      var tose = Toast("记账成功！");
      setTimeout(() => {
        tose.close();
        //  console.log(tose);
      }, 700);
      //清空数字框
      this.values = 0;
      //清空备注框
      this.$refs.refRemark.remark = ''
    },
  },
};
</script>

<style scope>
.showNum{
  position: fixed;
  right: 15px;
  bottom: 210px;
  /* margin: 20px 0; */
  height: 55px;
}
.expend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}
.expend div {
  /* flex:1; */
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
}
/* 标签被点击时的样式 */
.active_remark {
  background-color: #49abff;
  color: #f4f4f4;
}
/* 未被点击的标签 */
.normal_remark {
  background-color: #e3eded;
}
/* 解决样式问题 */
.expend span{
  width: 57px;
  /* flex:0 0 17.4% */
  flex:0 0 19.4%
 }
</style>